<template>
  <div>
    <ul class="list">
      <li
        v-for="(item,index) in liList "
        :key="index"
        v-on:click="addClass(index)"
        :class="{ischeck:index===current}"
      >{{ item.title }}+++{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 0,
      liList: [
        {
          title: '1',
          name: '1111'
        },
        {
          title: '2',
          name: '2222'
        },
        {
          title: '3',
          name: '3333'
        },
        {
          title: '4',
          name: '4444'
        },
        {
          title: '5',
          name: '5555'
        },
        {
          title: '6',
          name: '6666'
        },
        {
          title: '7',
          name: '7777'
        }
      ]
    }
  },
  methods: {
    addClass(index) {
      this.current = index
    }
  }
}
</script>
<style lang="scss" scoped>
.ischeck {
  background: #e6e6e6;
  height: 30px;
  width: auto;
  line-height: 0px;
  padding: 15px 10px;
}
</style>